<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下单</title>
</head>
<script src="./jquery-3.5.1.min.js"></script>
<script>
    let time = 14;

    function refreshTime() {
        if (time <= 0) {
            $("#orderList").show();
            $("#orderId").hide();
            $("#payAction").hide();
        }
        $("#payAction").val("支付(" + time + "s)")
        time -= 1;
    }

    function order() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: 'http://' + location.host + '/order?userId=1',
            contentType: "application/json;charset=UTF-8",
            success: function (result) {
                $("#orderId").text("订单号： " + result);
                $("#orderIdInput").val(result);
                $("#orderAction").hide();
                $("#payAction").show();
                setInterval(refreshTime, 1000);
            },
            error: function (result) {
                console.log(result)
            }
        });
    }

    function pay() {
        var orderId = $("#orderIdInput").val();
        $.ajax({
            type: "GET",
            dataType: "text",
            url: 'http://' + location.host + '/order/pay?orderId=' + orderId,
            contentType: "application/json;charset=UTF-8",
            success: function (result) {
                console.log(result)
                $("#payed").text(orderId + "已支付");
                $("#orderId").hide();
                $("#orderList").hide();
                $("#payAction").hide();
            },
            error: function (result) {
                console.log(result)
            }
        });
    }
</script>
<body>
<input type="button" id="orderAction" value="下单" onclick="order()"/>
<input type="button" id="orderIdInput" style="display: none"/>
<span id="orderId"></span><br>
<input type="button" id="payAction" value="支付(15s)" style="display: none" onclick="pay()"/>
<span id="orderList" style="display: none">订单列表</span>
<span id="payed"></span>

</body>
</html>